<script setup>
import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'	
import { reactive } from 'vue';
import { getMySelfApi } from '../../api';
import TipCollectMp from '@/components/tip-collect-mp/index.vue'
import { hasLogin } from '../../common/tools';
import { useAuthRouter } from '@/common/route.js'

const app = getApp()
const data = reactive({
	statusBarH: 0,
	navBarH: 0,
	book:{
		booksId: 1335041,
		cover: '/static/index/default-book-1.jpg',
		id: 1335041,
		title: '人教-英语-新起点-一年级上册',
		description: '一年级上册'
	}
})
let canGetMyself = true
onLoad(()=>{
	const { statusBarH, navBarH  } = app.globalData.navData
	data.statusBarH = statusBarH
	data.navBarH = navBarH
	
})
onShow(()=>{
	if (hasLogin() && canGetMyself){
		getMySelfBook()
		canGetMyself = false
	}
})

const getMySelfBook = async() =>{
	const { obj } = await getMySelfApi({course: 'english'})
	if (obj.length){
		data.book = obj[0]
	}
}

const navToWebView = () =>{
	const url = '/pages/web-view/index'
	useAuthRouter(url, {id: data.book.booksId})
}
const navToGrade = () =>{
	canGetMyself = true
	const url = '/pages/grade/index'
	useAuthRouter(url, {course: 'english'})
}
onShareAppMessage(()=>{
	return {
		title: '同步点读宝',
		path:`/pages/index/index`,
	}
})

</script>

<template>
	<image class="top-bg" src="/static/index/top-bg.png"/>
	<view class="nav" :style="{'top': data.statusBarH + 'px', 'height': data.navBarH + 'px'}">同步点读宝</view>
	<view class="top-container" :style="{'marginTop': data.statusBarH + data.navBarH + 'px'}">
		<view>人教同步跟读  轻松掌握</view>
		<image src="/static/index/top-book-bg.png" />
	</view>
	<view class="book-container">
		<image class="book-container-bg" src="/static/index/book-wrapper-bg.png" />
		<view class="book-container-header">
			<view class="book-header-left">
				<text class="book-container-titile">我的点读书</text>
				<text class="book-header-desp">小学同步点读课本</text>
			</view>
			<view class="book-header-right" @click="navToGrade">更换教材</view>
		</view>
		<image class="book-cover" :src="data.book.cover" />
		<view class="book-type">{{data.book.title}}</view>
		<view class="book-grade">{{data.book.description}}</view>
		<view class="read-btn" @click="navToWebView">开始点读</view>
	</view>
	<view class="block" />
	<TipCollectMp/>
	<button class="footer-share" open-type="share">
		<image src="/static/index/share-img.png" />
		<text>分享给同学，一起学习</text>
	</button>
</template>

<style lang="scss">
page{
	background: #E7F8F2;
}
.top-bg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 445rpx;
	z-index: -1;
}
.nav{
	position: fixed;
	width: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding-left: 34rpx;
	font-family: Alimama ShuHeiTi;
	font-weight: bold;
	font-size: 30rpx;
	color: #000000;
}
.top-container{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	view{
		width: 367rpx;
		height: 132rpx;
		margin-right: 8rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 61rpx;
		color: #000000;
	}
	image{
		width: 229rpx;
		height: 264rpx;
	}
}
.book-container{
	position: relative;
	width: 651rpx;
	height: 1014rpx;
	margin-left: 50rpx;
	box-sizing: border-box;
	padding-top: 38rpx;
	.book-container-bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 651rpx;
		height: 1014rpx;
		z-index: -1;
	}
	.book-container-header{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-left: 45rpx;
		padding-right: 6rpx;
		.book-header-left{
			display: flex;
			flex-direction: column;
			.book-container-titile{
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
				line-height: 34rpx;
			}
			.book-header-desp{
				margin-top: 9rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 25rpx;
				color: #646464;
				line-height: 25rpx;
			}
		}
		.book-header-right{
			width: 150rpx;
			height: 56rpx;
			border-radius: 30rpx 0 0 30rpx;
			text-align: center;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 56rpx;
			background: #51D499;
		}
	}
	.book-cover{
		width: 400rpx;
		height: 552rpx;
		display: block;
		border-radius: 24rpx;
		margin: 39rpx 0 0 125rpx;
	}
	.book-type{
		width: 100%;
		margin-top: 23rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #000000;
	}
	.book-grade{
		width: 100%;
		margin-top: 18rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 26rpx;
		color: #646464;
	}
	.read-btn{
		position: relative;
		width: 500rpx;
		height: 88rpx;
		border-radius: 50rpx;
		margin: 74rpx 0 0 75rpx;
		text-align: center;
		font-family: Chill Round Gothic;
		font-weight: bold;
		font-size: 30rpx;
		color: #025D25;
		line-height: 88rpx;
		background: linear-gradient(to right, #4CD27F, #68E3AE);
	}
}
.block{
	width: 100%;
	height: 120rpx;
}
.footer-share{
	position: fixed;
	width: 100%;
	height: 120rpx;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	image{
		width: 48rpx;
		height: 50rpx;
		margin-right: 22rpx;
	}
	text{
		font-family: Chill Round Gothic;
		font-weight: bold;
		font-size: 32rpx;
		color: #4DD383;
	}
	&::after{
		border: none;
	}
}
</style>